<template>
  <div class="page">
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="培训记录"
    ></van-nav-bar>
    <!-- 个人信息 -->
    <!-- <My-Public></My-Public> -->
    <div class="traing-record">约车记录</div>

    <van-tabs v-model="active">
      <!-- 科目一 -->
      <van-tab title="科目一">
        <div class="entirety">
          <div class="traing-record">科目一培训信息</div>

          <!-- 科目一培训信息 -->
          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">约课时段：</div>
              <p>2020-8-19~2020-8-20</p>
            </div>
            <div class="cultivate-list">
              <div class="article">教练：</div>
              <p>李三</p>
            </div>

            <div class="cultivate-list">
              <div class="article">培训方式：</div>
              <p>实训</p>
            </div>
            <div class="cultivate-list">
              <div class="article">课时：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">状态：</div>
              <p>已考完</p>
            </div>

            <div class="cultivate-list">
              <div class="btn-cancel">取消</div>
            </div>
          </div>

          <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">约课时段：</div>
              <p>2020-8-19~2020-8-20</p>
            </div>
            <div class="cultivate-list">
              <div class="article">教练：</div>
              <p>李三</p>
            </div>

            <div class="cultivate-list">
              <div class="article">培训方式：</div>
              <p>实训</p>
            </div>
            <div class="cultivate-list">
              <div class="article">课时：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">状态：</div>
              <p>已考完</p>
            </div>

            <div class="cultivate-list">
              <div class="btn-cancel">取消</div>
            </div>
          </div>-->

          <!--  科目一考试信息 -->
          <div class="traing-record">科目一考试信息</div>
          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>

          <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>-->
        </div>
      </van-tab>

      <!-- 科目二 -->
      <van-tab title="科目二">
        <div class="entirety">
          <div class="traing-record">科目二培训信息</div>
          <!-- 科目二培训信息 -->
          <div v-for="(item, index) in twoLists" :key="index" class="cultivate">
            <div class="cultivate-list">
              <div class="article">日期：</div>
              <p>{{ item.yctime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">约课时段：</div>
              <p>{{ item.beginTime }}~{{ item.endTime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">签到时间：</div>
              <p>{{ item.qdtime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">签退时间：</div>
              <p>{{ item.qttime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">驾校：</div>
              <p>{{ item.school }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">教练：</div>
              <p>{{ item.drillname }}</p>
            </div>
            <!-- <div class="cultivate-list">
            <div class="article">科目：</div>
            <p>科目一</p>
            </div>-->
            <!-- <div class="cultivate-list">
              <div class="article">培训方式：</div>
              <p>{{item.state}}</p>
            </div>-->
            <div class="cultivate-list">
              <div class="article">时长：</div>
              <p>{{ item.ljsc }}分钟</p>
            </div>
            <div class="cultivate-list">
              <div class="article">课时：</div>
              <p>{{ item.classNum }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">价格：</div>
              <p>{{ item.classNum }}x{{ item.price / item.classNum }}元</p>
            </div>
            <div class="cultivate-list">
              <div class="article">状态：</div>
              <!-- <p>{{item.wcstatus==="2"?"已完成":"未完成"}}</p> -->
              <p v-if="item.wcstatus === '0'">未完成</p>
              <p v-if="item.wcstatus === '1'">进行中</p>
              <p v-if="item.wcstatus === '2'">完成</p>
              <p v-if="item.wcstatus === '3'">旷课</p>
              <p v-if="item.wcstatus === '4'">旷课未收费</p>
            </div>
            <div @click="countermand(item.id, '2')" class="cultivate-list">
              <div v-if="item.wcstatus == '0'" class="btn-cancel">取消</div>
            </div>
          </div>

          <!--  科目二考试信息 -->
          <div class="traing-record">科目二考试信息</div>
          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>-->

          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>-->
        </div>
      </van-tab>

      <!-- 科目三 -->
      <van-tab title="科目三">
        <div class="entirety">
          <div class="traing-record">科目三培训信息</div>

          <!-- 科目三培训信息 -->
          <div
            v-for="(item, index) in threeLists"
            :key="index"
            class="cultivate"
          >
            <div class="cultivate-list">
              <div class="article">日期：</div>
              <p>{{ item.yctime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">约课时段：</div>
              <p>{{ item.beginTime }}~{{ item.endTime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">签到时间：</div>
              <p>{{ item.qdtime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">签退时间：</div>
              <p>{{ item.qttime }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">驾校：</div>
              <p>{{ item.school }}</p>
            </div>

            <div class="cultivate-list">
              <div class="article">教练：</div>
              <p>{{ item.drillname }}</p>
            </div>
            <!-- <div class="cultivate-list">
            <div class="article">科目：</div>
            <p>科目一</p>
            </div>-->
            <!-- <div class="cultivate-list">
              <div class="article">培训方式：</div>
              <p>{{item.state}}</p>
            </div>-->
            <div class="cultivate-list">
              <div class="article">时长：</div>
              <p>{{ item.lgsc }}分钟</p>
            </div>
            <div class="cultivate-list">
              <div class="article">课时：</div>
              <p>{{ item.classNum }}</p>
            </div>
            <div class="cultivate-list">
              <div class="article">价格：</div>
              <p>{{ item.classNum }}x{{ item.price / item.classNum }}元</p>
            </div>
            <div class="cultivate-list">
              <div class="article">状态：</div>
              <!-- <p>{{item.wcstatus==="2"?"已完成":"未完成"}}</p> -->
              <p v-if="item.wcstatus === '0'">未完成</p>
              <p v-if="item.wcstatus === '1'">进行中</p>
              <p v-if="item.wcstatus === '2'">完成</p>
              <p v-if="item.wcstatus === '3'">旷课</p>
            </div>
            <!-- <div class="cultivate-list">
            <div class="article">操作：</div>
            <div class="">取消</div>
            </div>-->
            <!-- 状态 -->
            <!-- <div class="cultivate-list">
              <div class="article">签到签退：</div>
              <div class="btn-button">
                <div v-if="item.wcstatus==='0'" @click="issuingDate(1,item.id)">签到</div>
                <div v-else>已签到</div>
                <div
                  v-if="item.wcstatus==='0'||item.wcstatus==='1'  "
                  @click="issuingDate(2,item.id)"
                >签退</div>
                <div v-else>已签退</div>
              </div>
            </div>-->
            <div class="cultivate-list">
              <div
                @click="countermand(item.id, '3')"
                v-if="item.wcstatus == '0'"
                class="btn-cancel"
              >
                取消
              </div>
              <div v-else-if="item.wcstatus == '1'" class="btn-cancel">
                取消
              </div>
              <!-- <div v-else class="btn-cancel">取消</div> -->
            </div>
          </div>

          <!--  科目三考试信息 -->
          <div class="traing-record">科目三考试信息</div>
          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>-->

          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>-->
        </div>
      </van-tab>

      <!-- 科目四 -->
      <van-tab title="科目四">
        <div class="entirety">
          <div class="traing-record">科目四培训信息</div>

          <!-- 科目一培训信息 -->
          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">约课时段：</div>
              <p>2020-8-19~2020-8-20</p>
            </div>
            <div class="cultivate-list">
              <div class="article">教练：</div>
              <p>李三</p>
            </div>

            <div class="cultivate-list">
              <div class="article">培训方式：</div>
              <p>实训</p>
            </div>
            <div class="cultivate-list">
              <div class="article">课时：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">状态：</div>
              <p>已考完</p>
            </div>

            <div class="cultivate-list">
              <div class="btn-cancel">取消</div>
            </div>
          </div>

          <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">约课时段：</div>
              <p>2020-8-19~2020-8-20</p>
            </div>
            <div class="cultivate-list">
              <div class="article">教练：</div>
              <p>李三</p>
            </div>

            <div class="cultivate-list">
              <div class="article">培训方式：</div>
              <p>实训</p>
            </div>
            <div class="cultivate-list">
              <div class="article">课时：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">状态：</div>
              <p>已考完</p>
            </div>

            <div class="cultivate-list">
              <div class="btn-cancel">取消</div>
            </div>
          </div>-->

          <!--  科目四考试信息 -->
          <div class="traing-record">科目四考试信息</div>
          <!-- <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>

          <div class="cultivate">
            <div class="cultivate-list">
              <div class="article">准假车型：</div>
              <p>C1</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试日期：</div>
              <p>2020-8-19</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试次数：</div>
              <p>3</p>
            </div>
            <div class="cultivate-list">
              <div class="article">考试状态：</div>
              <p>已考</p>
            </div>
          </div>-->
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import {
  souvenirStore,
  callOff,
  issuingDate,
  absenteeism
} from "../../assets/js/api/user";
// import MyPublic from "./MyPublic";
export default {
  name: "TrainingPecord",
  data() {
    return {
      // active1: 0,
      active: 0,
      // inAllHour: "", //总课时
      // yetHour: "", //已学课时
      // residueHour: "", //剩余课时
      oneList: [], // 科一列表
      twoLists: [], // 科二列表
      threeLists: [], // 科三列表
      fourList: [] // 科四列表
    };
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });

    this.create();
    souvenirStore().then(res => {
      // console.log(res.data);
      if (res.code == 0) {
        // console.log(res);
        let list = res.data.planlog;
        for (let i = 0; i < list.length; i++) {
          if (list[i].km === "2") {
            this.twoLists.push(list[i]);
          } else if (list[i].km === "3") {
            this.threeLists.push(list[i]);
          }
        }
        // console.log(this.twoLists);
        // console.log(this.threeLists);
      }
    });
  },
  // components: { MyPublic },
  methods: {
    // 旷课
    absenteeisms(id) {
      // console.log("bb");
      absenteeism(id).then(res => {
        // console.log(res);
        if (res.code == 0) {
          Toast.success(res.msg);
          this.oneList = [];
          this.twoLists = [];
          this.threeLists = [];
          this.fourList = [];
          this.create();
        }
      });
    },

    // 签到签退按钮
    issuingDate(type, id) {
      // console.log(lid);

      // console.log(type, id);
      issuingDate(type, id).then(res => {
        if (res.code === 0) {
          Toast.success(res.msg);
          this.oneList = [];
          this.twoLists = [];
          this.threeLists = [];
          this.fourList = [];
          this.create();
        }
      });
    },

    // 取消按钮
    countermand(lid, num) {
      // console.log(lid);

      Dialog.confirm({
        message: "确认取消"
      })
        .then(() => {
          // on confirm
          callOff(lid).then(res => {
            console.log(res);
            if (res.code == 0) {
              Toast.success("取消成功");
              if (num === "2") {
                for (let i = 0; i < this.twoLists.length; i++) {
                  if (lid === this.twoLists[i].id) {
                    this.twoLists.splice(i, 1);
                  }
                }
              }
              if (num === "3") {
                for (let i = 0; i < this.threeLists.length; i++) {
                  if (lid === this.threeLists[i].id) {
                    this.threeLists.splice(i, 1);
                  }
                }
              }
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    create() {},

    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
